<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<%
	String path=request.getContextPath();
	String basePath=request.getScheme()+"://"
			+request.getServerName()+":"+request.getServerPort()
			+path+"/";
%>
<!DOCTYPE html>
<html>
<base href="<%=basePath%>">
<head>
	<title>论坛</title>
	<meta charset="utf-8">
	<link rel="icon" href="img/logo.png" sizes="32x32">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/problem.css">
	<link rel="stylesheet" type="text/css" href="css/animate.min.css">
	<link rel="stylesheet" type="text/css" href="css/syalert.min.css">
	<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/popper.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/syalert.min.js"></script>
	<script type="text/javascript" src="js/jquery.dotdotdot.js"></script>
	<script src="layui/layui.js"></script>
	<style type="text/css">
		.img-circle{
			border-radius: 50%;
		}
		.article a{
			text-decoration: none;
			color: #0B4793;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    font-size: 22px;
		}
		.article a:hover{
			color: #d70000;
		}
		.summary {
		    color: #888;
		    font-size: 14px;
		    line-height: 180%;
		    padding: 0 0 5px 5px;
		}
		.dropdown-menu .link-myspace:hover{
			color:black;
		}
		.title-ellipsis {
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  -webkit-box-orient: vertical;
		  display: -moz-box;
		  -moz-line-clamp: 2;
		  -moz-box-orient: vertical;
		  word-wrap: break-word;
		  word-break: break-all;
		  white-space: normal;    
		}
	</style>
</head>
<body style="background:url('img/ba.png');background-size: auto;background-color: rgba(0,0,0,0.1);">
	<!-- 登录窗口 -->
	<div style="width: 350px;" class="sy-alert sy-alert-model animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert1">
		<div style="padding: 0 10px 10px 10px;">
			<div style="overflow: hidden;"><a href="javascript:;"  onclick="syalert.syhide('alert1')" style="color: black;float: right;"><i class="fa fa-times" aria-hidden="true"></i></a></div>
			<h3 align="center" style="font-size: 20px;font-weight: 700;" id="form_title">登录</h3>
	  		<hr>
	  		<!-- 登录form -->
	  		<form action="user/login" method="post" id="login_form">
				<input class="form-control" type="text" placeholder="用户名" autocomplete="off" tabindex="1" name="userName" id="username" />
				<div style="margin-top: 15px;"></div>
				<input class="form-control" type="password" placeholder="密码" autocomplete="off" tabindex="1" name="passWord" id="password" />
				<div style="margin-top: 15px;"></div>
				<div style="overflow: hidden;">
					<input class="form-control" type="text" placeholder="验证码" autocomplete="off" tabindex="1" name="checkCode" id="checkCode" style="width: 230px;float: left;border-right: none;border-top-right-radius: 0px;border-bottom-right-radius: 0px;" />
					<canvas id="canvas" style="width: 100px;height: 38px;float: right;border: 1px solid #ced4da;border-radius: 0.25rem;border-left: none;border-top-left-radius: 0px;border-bottom-left-radius: 0px;" width="100" height="47" onclick="dj()"></canvas>
				</div>
				<div style="overflow: hidden;">
					<a href="javascript:;" style="padding-top: 15px;float: right;text-decoration: none;font-size: 13px;color: #999999;" id="register">新用户注册</a>
				</div>
				<!-- 引入验证码 -->
				<script type="text/javascript" src="js/checkCode.js"></script>
				<div style="margin-top: 15px;"></div>
				<button type="submit" class="form-control btn btn-primary" id="sub_btn">登录</button>
			</form>
			<!-- 注册form -->
			<form action="user/register" method="post" id="register_form" style="display: none;">
				<input type="hidden" name="userName" id="username11">
				<input type="hidden" name="passWord" id="password11">
				<input type="hidden" name="userImg" value="header.jpg">
				<input class="form-control" type="text" placeholder="注册用户名" autocomplete="off" tabindex="1" name="userName1" id="username1" />
				<div style="margin-top: 15px;"></div>
				<input class="form-control" type="password" placeholder="注册密码" autocomplete="off" tabindex="1" name="passWord1" id="password1" />
				<div style="margin-top: 15px;"></div>
				<input class="form-control" type="password" placeholder="再次输入密码" autocomplete="off" tabindex="1" name="passWord2"  id="password2" />
				<div style="margin-top: 15px;"></div>
				<input class="form-control" type="email" placeholder="注册邮箱" autocomplete="off" tabindex="1" name="email" id="email" />
				<div style="overflow: hidden;">
					<a href="javascript:;" style="padding-top: 15px;float: right;text-decoration: none;font-size: 13px;color: #999999;" id="login">已有账号，去登录</a>
				</div>
				<div style="margin-top: 15px;"></div>
				<button type="submit" class="form-control btn btn-primary" id="sub_btn">注册</button>
			</form>
		</div>
	</div>
	<!-- 顶部导航 -->
	<div class="nav fixed-top">
		<div class="container">
			<div class="top-title"><span>OnlineJudge</span></div>
			<div class="top-list">
				<ul>
					<li class=""><a href="problem/list?pager.offset=0">题库</a></li>
					<li class=""><a href="solution/list?pager.offset=0">题解</a></li>
					<li class="active1"><a href="community/list?pager.offset=0">论坛</a></li>
				</ul>
			</div>
			<div class="top-last">
				<c:if test="${currentUser!=null }">
					<a href="user/myspace" class="dropdown-toggle" data-toggle="dropdown">
	                    <img class="img-circle" src="${pageContext.request.contextPath }/img/${currentUser.getUserImg() }" style="margin: -5px;" width="35px">
	                    &nbsp;
	                    <strong id="id_user_username">${currentUser.getUserName() }</strong>
	                    <b class="caret"></b>
                	</a>
                	<ul class="dropdown-menu" style="width:50px;margin-top:16px;font-size: 13px;text-align: center">
                		<li style="padding: 0;"><hr style="margin:0;"><a class="link-myspace" href="user/myspace" style="font-size:14px;">个人中心</a></li>
                		<li style="padding: 0;"><hr style="margin:0;"><a class="btn btn-outline-primary btn-lg btn-block" role="button" href="user/logout" style="font-size:14px;">退出登录</a></li>
                    </ul>
				</c:if>
				<c:if test="${currentUser==null }">
					<a href="javascript:void(0);" onclick="syalert.syopen('alert1')">登录/注册</a>
				</c:if>
			</div>
		</div>
	</div>
	<!-- 内容 -->
	<div class="container" style="margin-top: 70px;">
		<div class="panel panel-default">
			<div class="panel-body">
				<form class="form-inline row justify-content-center" style="margin-bottom: 20px;margin-top: 20px;" action="community/list?pager.offset=0" method="post">
				  <div class="form-group mx-sm-3 mb-2">
				    <input type="text" class="form-control" id="queryContent" placeholder="文章关键字搜索" style="width: 400px;font-size: 14px;">
				  </div>
				  <button type="submit" class="btn btn-primary mb-2" style="font-size: 14px;">搜索</button>
				</form>
				<a href="community/write" role="button" class="btn btn-outline-secondary mb-2" style="font-size: 16px;"><i class="fa fa-pencil" aria-hidden="true" style="padding-right: 10px;"></i>写文章</a>
				<div>
					<c:forEach var="community" items="${communityList }">
					<div class="article">
						<hr style="margin: 10px 0 10px 0;">
						<h2 class="">
							<a title="${community.getItemTitle() }" href="community/item?communityId=${community.getCommunityId() }">${community.getItemTitle() }</a>
						</h2>
						<div class="summary title-ellipsis" id="dot_${community.getCommunityId()}">${community.getItemContent() }</div>
						<div>
							<a href="user/otherspace?userId=${community.getUserId() }">
						        <img class="img-circle" src="${pageContext.request.contextPath }/img/${community.getUserImg() }" alt="作者的头像" style="width:29px;height:29px;">
						        <span style="font-size: 16px;">${community.getUserName() }</span>
						    </a>
						    &nbsp;
						    <span style="font-size: 14px;color: #888;font-weight: normal;">阅读量：${community.getItemCount() }</span>
							&nbsp;
							&nbsp;
				        	<span style="font-size: 14px;color: #888;font-weight: normal;">${community.getItemDate() }</span>
						</div>
					</div>
					</c:forEach>
				</div>
				<nav aria-label="Page navigation example" class="row justify-content-center" style="font-size:14px;">
					<ul class="pagination">
						<pg:pager url="${requestScope.url}" items="${requestScope.total}" export="currentPageNumber=pageNumber" maxPageItems="10" maxIndexPages="4">
							<pg:first>
								<li class="page-item"><a class="page-link" href="${pageUrl }&queryContent=${queryContent}">首页</a></li>
						    </pg:first>
							<pg:prev>
								<li class="page-item"><a class="page-link" href="${pageUrl }&queryContent=${queryContent}">上一页</a></li>
			     			</pg:prev>
							<pg:pages>
								<c:choose>
									<c:when test="${currentPageNumber eq pageNumber}">
			        					<li class="page-item active"><a class="page-link" href="${pageUrl }&queryContent=${queryContent}">${pageNumber }</a></li>
			       					</c:when>
									<c:otherwise>
										<li class="page-item"><a class="page-link" href="${pageUrl }&queryContent=${queryContent}">${pageNumber }</a></li>
			       					</c:otherwise>
								</c:choose>
							</pg:pages>
							<pg:next>
								<li class="page-item"><a class="page-link" href="${pageUrl }&queryContent=${queryContent}">下一页</a></li>
			     			</pg:next>
							<pg:last>
								<li class="page-item"><a class="page-link" href="${pageUrl }&queryContent=${queryContent}">尾页</a></li>
			     			</pg:last>
						</pg:pager>
					</ul>
				</nav>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/login_register.js"></script>
	<c:if test="${LoginError!=null && currentUser==null}">
		<script type="text/javascript">
			layui.use('layer', function() {
				var layer = layui.layer;
				var $ = layui.jquery;
				layer.msg('用户名或密码错误', { icon: 2, time: 1000, shade: [0.6, '#000', true] });
			});
		</script>
	</c:if>
	<c:if test="${RegisterError!=null&&RegisterSuccess==null}">
		<script type="text/javascript">
			layui.use('layer', function() {
				var layer = layui.layer;
				var $ = layui.jquery;
				layer.msg('该用户已注册过！请重新注册', { icon: 2, time: 1000, shade: [0.6, '#000', true] });
			});
		</script>
	</c:if>
	<c:if test="${RegisterSuccess!=null}">
		<script type="text/javascript">
			layui.use('layer', function() {
				var layer = layui.layer;
				var $ = layui.jquery;
				layer.msg('注册成功', { icon: 1, time: 1000, shade: [0.6, '#000', true] });
			});
		</script>
	</c:if>
</body>
</html>